<template>
	<view class="content">
		<view class="top-box flexWrap">
			<view class="left-box flexWarpCenterColumn">
				<view class="head-box">
					<image :src="scoreInfo.party_a_avatar"></image>
				</view>
				<view class="name-lable">{{scoreInfo.party_a_name}}</view>
			</view>
			<view class="vs-box flexWarpCenterColumn">
				<image src="../../static/appointment/vs-icon.png" class="vs-icon"></image>
				<view class="vs-status" :class="{blue:scoreInfo.appointment_status>=25,grey:scoreInfo.appointment_status==20}">
					<block v-if="scoreInfo.appointment_status==15">爽约</block>
					<block v-if="scoreInfo.appointment_status==25">开台中</block>
					<block v-if="scoreInfo.appointment_status==30">确认比分</block>
					<block v-if="scoreInfo.appointment_status==40">已完成</block>
				</view>
			</view>
			<view class="right-box flexWarpCenterColumn">
				<view class="head-box">
					<image :src="scoreInfo.party_b_avatar" v-if="scoreInfo.party_b_avatar"></image>
					<image src="../../static/appointment/person-icon.png" v-else></image>
				</view>
				<view class="name-lable">{{scoreInfo.party_b_name}}</view>
			</view>
		</view>
		<view class="score-box">
			<view class="score-top">
				<image src="https://static.mo-yu.vip/wechat/images/scoreBg.png" class="scoreBg"></image>
				<view class="num-box flexWrapNo">
					<view class="num">
						{{num}}
					</view>
					<view class="point-box flexWarpCenterColumn">
						<text class="point"></text>
						<text class="point"></text>
					</view>
					<view class="num">
						{{num2}}
					</view>
				</view>
			</view>
			<view class="score-bottom flexWrap">
				<block v-if="(scoreInfo.appointment_status!=40&&scoreInfo.appointment_status!=15)">
					<view class="operation-box flexWrapNo" v-if="operationFlag">
						<view class="reduce" @tap="reduce(0)">-</view>
						<view class="plus" @tap="plus(0)">+</view>
					</view>
					<view class="operation-box flexWrapNo" v-if="operationFlag">
						<view class="reduce" @tap="reduce(1)">-</view>
						<view class="plus" @tap="plus(1)">+</view>
					</view>
				</block>
				<view class="tips" v-if="scoreInfo.appointment_status==40">比分已确认</view>
				<view class="tips" v-if="scoreInfo.appointment_status==15">{{break_promise!=user_id?'对方爽约':"我爽约了"}}</view>
			</view>
		</view>
		<view class="exeplan-box">
			<view>比分说明：</view>
			<view>1、双方秉持公平、公正的原则比赛，经双方同意后比分才会生效；</view>
			<view>2、台费支付：抢台费模式下由败者支付台费，胜者台费自动退还；其他默认根据约定支付。</view>
			<view>3、争议解决：对于比赛结果有争议的，可以申请店长仲裁，以最终店长判定结果为准。店长电话：<text @tap="makePhoneCall()">{{customer_service_mobile}}</text> </view>
		</view>
		<view class="bottom-box flexWrap">
			<view class="define-btn" style="margin: auto;" v-if="scoreInfo.appointment_status==15">{{break_promise!=user_id?'对方爽约':"我爽约了"}}</view>
			<view class="define-btn" style="margin: auto;" v-if="scoreInfo.appointment_status==40">比分已确认</view>
			<block v-if="scoreInfo.appointment_status!=40&&scoreInfo.appointment_status!=15">
				<block v-if="scoreInfo.confirm_score">
					<view class="define-btn" style="margin: auto;padding: 0 10upx;" v-if="scoreInfo.confirm_score==user_id">已提交比分等待对方确认</view>
					<block v-else>
						<view class="btn" @tap="confirmScore(1)">我认可比分</view>
						<view class="define-btn" @tap="disAgree">我不认可比分</view>
					</block>
				</block>
				<block v-if="break_promise">
					<block v-if="break_promise==user_id">
						<view class="btn" @tap="breakPromise()">我爽约了</view>
						<view class="define-btn" @tap="noBreak()">我没爽约</view>
					</block>
					<view class="define-btn" style="margin: auto;padding: 0 10upx;" v-else>已提交爽约等待对方确认</view>
				</block>
				<block v-if="!break_promise&&!scoreInfo.confirm_score">
					<view class="btn" @tap="rightBreakPromise()">对方爽约</view>
					<view class="define-btn" @tap="confirmScore(0)">确认比分</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				num2:0,
				id:"",
				scoreInfo:{},
				user_id:"",
				break_promise:"",
				showScore:false,
				customer_service_mobile:"",
				operationFlag:true
			};
		},
		onLoad(ops) {
			this.id=ops.id
			this.user_id=uni.getStorageSync('user_id')
			this.getScoreInfo();
			this.getAppointmentInfo();
		},
		onPullDownRefresh: function() {
			this.getScoreInfo();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods:{
			reduce(index){
				if(index==0){
					if(this.num==0) return;
					this.num--
				}else{
					if(this.num2==0) return;
					this.num2--
				}
			},
			plus(index){
				if(index==0){
					this.num++
				}else{
					this.num2++
				}
			},
			// 拨打电话
			makePhoneCall() {
				let that = this
				if(!that.customer_service_mobile){
					this.$tools.showToast('暂无客服电话')
					return;
				}
				uni.makePhoneCall({
					phoneNumber:that.customer_service_mobile
				})
			},
			getAppointmentInfo(){
				this.$request.post(this.$api.appointmentInfo, {
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.customer_service_mobile=data.customer_service_mobile
					}
				})
			},
			// 比分信息
			getScoreInfo(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.num=0
				this.num2=0
				this.$request.post(this.$api.scoreInfo, {
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.scoreInfo=data
						if(data.appointment_status>=30){
							this.num=data.score_a
							this.num2=data.score_b
						}
						if(data.break_promise){
							this.break_promise=data.break_promise
						}else{
							this.break_promise=""
						}
						if(!this.scoreInfo.confirm_score){
							this.operationFlag=true
						}else{
							if(this.scoreInfo.confirm_score!=this.user_id){
								this.operationFlag=false
							}
						}
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 对方爽约
			rightBreakPromise(){
				this.$request.post(this.$api.rightBreakPromise, {
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: (res) => {
								this.getScoreInfo();
							}
						});
					}
				})
			},
			// 确定爽约
			breakPromise(){
				this.$request.post(this.$api.breakPromise, {
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.$tools.showToast('操作成功')
						this.getScoreInfo();
					}
				})
			},
			noBreak(){
				this.$request.post(this.$api.noBreak, {
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						uni.showModal({
							title: '提示',
							content:"操作成功,等待对方确认",
							success: (res) => {
								this.getScoreInfo();
							}
						});
					}
				})
			},
			// 确认比分
			confirmScore(type){
				this.$request.post(this.$api.confirmScore, {
					id:this.id,
					score_a:this.num,
					score_b:this.num2,
					type:type
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						if(type==0){
							uni.showModal({
								title: '提示',
								content:"操作成功,等待对方确认",
								success: (res) => {
									this.getScoreInfo();
								}
							});
						}else{
							this.$tools.showToast('操作成功')
							this.getScoreInfo();
						}
					}
				})
			},
			disAgree(){
				this.$request.post(this.$api.approveScore, {
					id:this.id,
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.getScoreInfo();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 32upx;
		padding-bottom: 120upx;
	}
	.top-box{
		background: linear-gradient(141deg, #8D2639 0%, #121EAF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding:56upx 82upx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
		.name-lable{
			width: 200upx;
			margin-top: 28upx;
			text-align: center;
			@include ellipsis(1);
		}
		.left-box{
			.head-box{
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				z-index: 9;
				overflow: hidden;
			}
		}
		.vs-box{
			.vs-icon{
				width: 112upx;
				height: 112upx;
			}
			.vs-status{
				width: 108rpx;
				height: 40rpx;
				line-height: 40upx;
				text-align: center;
				background: #772622;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				border: 2rpx solid #EB564F;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 22upx;
			}
			.grey{
				color: #5250AA;
				background: #19185E;
				border: 2rpx solid #5250AA;
			}
			.green{
				background: #1C573B;
				border: 2rpx solid #53A33A;
			}
			.blue{
				background: #2263AC;
				border: 2rpx solid #0AD2E6;
			}
		}
		.right-box{
			.head-box{
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				z-index: 9;
				overflow: hidden;
			}
		}
	}
	.score-box{
		height: 516rpx;
		background: linear-gradient(360deg, #333282 0%, rgba(27,26,90,0) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 6upx;
		.score-top{
			height: 422upx;
			position: relative;
			.scoreBg{
				position: absolute;
			}
			.num-box{
				z-index: 99;
				position: relative;
				padding-top: 42upx;
				justify-content: center;
				.num{
					width: 228upx;
					height: 260upx;
					line-height: 260upx;
					text-align: center;
					font-size: 200rpx;
					font-family:monospace;
					font-weight: 400;
					color: #FFFFFF;
					background: url('../../static/appointment/numBg.png') no-repeat center/100% 100%;
				}
				.point-box{
					margin: 0 28upx;
					.point{
						width: 28rpx;
						height: 28rpx;
						background: #FFFFFF;
						opacity: 0.5;
						display: inline-block;
						&:nth-last-of-type(1){
							margin-top: 40upx;
						}
					}
				}
			}
		}
		.score-bottom{
			padding: 0 46upx;
			margin-top: -20upx;
			.tips{
				margin: auto;
				color: #26BCFD;
			}
			.operation-box{
				.reduce{
					width: 80rpx;
					height: 80rpx;
					background: #1D1C5C;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-size: 48rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
					margin-right: 84upx;
				}
				.plus{
					width: 80rpx;
					height: 80rpx;
					background: #26BCFD;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-size: 48rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}
	.exeplan-box{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #82819B;
		margin-top: 48upx;
		line-height: 42upx;
	}
	.bottom-box {
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding:0 32upx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.btn{
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 300rpx;
			height: 80rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #26BCFD;
			text-align: center;
		}
		.define-btn {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			min-width: 300rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			text-align: center;
		}
	}
</style>
